<template>
  <div class="task-container">
    <div class="task-1">
      <div class="task-title">{{ taskInfo.title }}</div>
      <div class="task-price">
        <van-icon size="20px" style="margin-right: 10px" name="points" />
        {{ Number(taskInfo.price) / 100 }}
      </div>
    </div>
    <van-divider />
    <div class="task-2">
      <div>
        <van-tag type="primary" size="large">{{
          typeStr(taskInfo.type)
        }}</van-tag>
      </div>
      <div class="task-time">
        <span>{{ dayjs(taskInfo.time).format("YYYY/MM/DD") }}</span>
        <span style="margin-left: 10px">{{
          dayjs(taskInfo.time).format("HH:MM")
        }}</span>
      </div>
    </div>
    <van-divider />
    <div class="task-content">
      {{ taskInfo.content }}
    </div>
    <div
      class="task-resource"
      v-for="(item, index) in resourceList"
      :key="index"
    >
      <img
        class="task-image"
        v-if="isImageUrl(item.url)"
        :src="item.url"
        alt=""
      />
      <video
        class="task-video"
        v-if="isVideoUrl(item.url)"
        :src="item.url"
      ></video>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getTaskInfo } from "../../../service/task";
import { useAppStore } from "../../../stores";
import "./index.less";
import dayjs from "dayjs";

const route = useRoute();
const router = useRouter();
const appStore = useAppStore();

appStore.setAppNav("navTitle", "打卡详情");

const data = reactive({
  taskInfo: {},
  resourceList: [],
});

const typeStr = computed((val) => {
  return (val) => {
    const typeMap = {
      1: "学习",
      2: "表现",
      3: "其他",
    };
    return typeMap[val];
  };
});

const { taskInfo, resourceList } = toRefs(data);

const getTaskDetail = async () => {
  const { data, status } = await getTaskInfo({
    id: route.query.id,
  });
  if (status == 0) {
    taskInfo.value = data;
    resourceList.value = data.resource && JSON.parse(data.resource);
  }
};

// 判断是否为图片
const isImageUrl = (url) => {
  return /\.(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF)$/.test(url);
};

// 判断是否为视频
const isVideoUrl = (url) => {
  return /\.(mp4|MP4)$/.test(url);
};

getTaskDetail();
</script>

<style lang="less" scoped></style>
